*{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}


a,a:hover,a:active,a:visited,a:link,a:focus{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    outline:none;
    background: none;
    text-decoration: none;
}
html,body{
    height: 100%;
    -webkit-user-select:none;
    -moz-user-select:none;
    -o-user-select:none;
    user-select:none;
    overflow-y: hidden;
}
body{
    padding-bottom: 0;
}
#play_video{
    /*position: relative;*/
}
.top{
    width: 100%;
    position: absolute;
    top: 40px;
    left: 0;
    height: 60px;
    padding: 10px 16px;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    z-index: 2;
}
.host-avatar{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    /*border: 1px solid #bebebe;*/
    float: left;
}
.top .info{
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    margin-left: 4px;
    float: left;
    font-size: 14px;
}
.top .info{
    padding-top: 4px;
    font-size: 14px;
    line-height: 18px;
}
.top .info .host-name{
    display: block;
}
.top .host-sid {
    float: right;
    background: rgba(0,0,0,0.3);
    color: #fff;
    padding: 4px 8px;
    border-radius: 5px;
    min-width: 30px;
    text-align: center;
    font-size: 14px;
}
.top .host-sid i{
    font-style: normal;
}
.comments-wrap .vcp-playing,.comments-wrap .vcp-player{
    margin: 0 auto;
}
.comments-wrap .vcp-player{
    /*z-index: 3;*/

}
.main{
    margin: 0 auto;
    height: 100%;
}
/*play_bg_hide*/
.vcp-bigplay{
    display: none!important;
}
.vcp-loading{
    margin-top: 0!important;
}
.play-btn{
    display: inline-block;
    position: absolute;
    opacity: 1;
    width: 80px;
    height: 80px;
    left: 50%;
    top: 50%;
    margin: -40px 0 0 -40px;
    cursor: pointer;
    background-position: -1px -81px;
    background-image: url("/share/img/sprite_icon.png");
    background-repeat: no-repeat;
    z-index: 1001;
    display: none;
}

#shopping-wrap{
    position: absolute;
    top: 80px;
    right: 8px;
    z-index: 2;
}

#shopping-wrap{
    display:flex;
    display:-webkit-flex;
    flex-flow: column;
    -webkit-flex-flow: column;
}
#shopping-wrap a{
    flex: 1;
    margin-bottom: 8px;
    /*min-width: 80px;*/
    width: 40px;
    height: 40px;
    overflow: hidden;
    /*background: rgba(0,0,0,0.3);*/
    color: #fff;
    text-align: center;
    font-size: 24px;
}
#shopping-wrap a img{
    height: 100%;
    /*background: rgba(255,255,255,0.5);*/
}
.vcp-player video{
    margin: 0 auto;
    object-fit: cover;
}
.comments-wrap{
    position: absolute;
    width: 80%;
    height: 40%;
    left: 0;
    bottom: 80px;
    z-index: 1001;
    overflow: hidden;
    overflow-y: auto;
}
.comments-wrap::-webkit-scrollbar {display:none}
.fans-name {
    width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 4px;
    color: #ffbd34;
}
.comments-list-wrap li span {
    vertical-align: middle;
    line-height: 24px;
}

.comments-list-wrap li span.fans-name {
    display: inline-block;
    width: auto;
    max-width: 100px;
}
.comments-list-wrap li span.comments_text {
    color: #fff;
    margin-right: 4px;
}
.playback-wrap .item{
    display: block;
    width: 130px;
    height: 130px;
    background-size: cover;
    background-position: center;
}
.playback-wrap .item:first-child{
    margin-left: 8px;
}
.playback-wrap .item:last-child{
    margin-right: 8px;
}
/* input[type=text]{
     height: 30px; line-height: 30px; position: absolute; bottom: 10px;left: 0; right: 0; z-index: 100000000000000;
     border: 1px solid red;
 }*/
.share-title{
    width: 100%;
    text-align: center;
    background: rgba(0,0,0,0.3);
    color: #fff;
    height: 40px;
    line-height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    font-weight: 400;
    margin: 0;
    font-size: 16px;
}
.footer{
    width: 100%;
    position: absolute;
    bottom: 20px;
    z-index: 3;
    display: none;
    /*background: rgba(255,255,255,0.7);*/
}
.footer .tool-wrap{
    height: 44px;
    padding: 10px;
}
.footer #js-start-talk{
    display: inline-block;
    width: 44px;
    height: 44px;
    background: url(/share/img/icon_chat.png) no-repeat;
    background-size: cover;
}
.footer #js-talk-ipt-wrap{
    background: rgba(255,255,255,0.8);
    position: relative;
}

.footer #js-talk-ipt-wrap #js-talk-ipt{
    width: 100%;
    height: 50px;
    line-height: 30px;
    display: block;
    box-sizing: border-box;
    padding: 10px 100px 10px 10px;
    border: none;
    background: none;
    outline: none;
    margin: 0;
}
.footer #js-talk-ipt-wrap #js-send-talk-btn{
    width: 80px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    border-left: 1px solid #ccc;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    z-index: 2;
    text-decoration: none;
    color: #333;
    outline: none;
}
#video_sms_list{
    padding: 4px 0;
}
#video_sms_list li{
    line-height: 26px;
    word-break: break-all;
    margin-bottom: 4px;
    font-size: 14px;
}
.vcp-poster-pic.cover{
    height: 100%!important;
    width: auto!important;
}
#video_sms_list li div.inline-bg{
    display: inline-block;
    background: rgba(0,0,0,0.2);
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 6px;
}

.playback-tips-wrap{
    position: relative;
    height: 100%;
    overflow: hidden;
}

.playback-tips-wrap .back-img{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    -moz-transform: perspective(1px) translate(-50%,-50%);
    -webkit-transform: perspective(1px) translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: perspective(1px) translate(-50%,-50%);
}
.playback-tips-wrap span.opacity-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 2;
}
.playback-tips-wrap .back-tips-text{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    color: #fff;
}

.playback-tips-wrap .back-tips-text h1{
    width: 100%;
    text-align: center;
    color: #fff;
    line-height: 30px;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -16px;
    font-size: 16px;
}
.top-left-wrap{
    display: inline-block;
    background: rgba(0,0,0,0.3);
    border-radius: 20px;
    min-width: 100px;
    max-width: 300px;
    padding-right: 20px;
}


.playback-tips-wrap p.teach{
    text-align: center;
}
.playback-tips-wrap h3{
    text-align: center;
    margin: 26px 0;
    font-weight: 200;
    font-size: 24px;
}
.playback-tips-wrap img{
    width: 80px;
    height: 80px;
    border: 1px solid #bbb;
    border-radius: 50%;
    display: block;
    margin: 80px auto 20px;
}
.back-info-wrap{
    display: flex;
    display: -webkit-flex;
}
.back-info-wrap div.item{
    flex:1;
    -webkit-flex:1;
    width: 80px;
    height: 80px;
}
.back-info-wrap div.item p.title{
    font-size: 14px;
    text-align: center;
}
.back-info-wrap div.item p.content{
    font-size: 18px;
    font-family: 'Arial';
    text-align: center;
    margin: 20px 0 8px;
}

/*轮播图*/
.swiper-out-wrap{
    position: absolute;
    left: 0;
    bottom: 84px;
    width: 100%;
    height: 44%;
    z-index: 1002;
    background: rgba(255,255,255,0.2);
    display: none;
}

.slide-wrap{
    width: 100%;
    height: 100%;
}
.slide-wrap .swiper-button-next{
    width: 36px;
    height: 36px;
    background: url("/index/img/pc-sprite.png") 36px 36px;
}
.slide-wrap .swiper-button-prev{
    width: 36px;
    height: 36px;
    background: url("/index/img/pc-sprite.png") 0 36px;
}

/* .slide-wrap .swiper-slide img{
     min-height: 100%;
     width: 100%;
     position: absolute;
     top: 50%;
     left: 0;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);

 }*/

/*.swiper-wrapper{
    height: 100%;
}

.swiper-slide{
    height: 100%;

}

.swiper-slide img{
    width: 100%;
    height: 100%;

}*/

.icon-ppt{
    position: absolute;
    right: 10px;
    bottom: 30px;
    z-index: 1003;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: url("") no-repeat;
    background-size: cover;
    background-color: rgba(0,0,0,0.3);
}

.icon-close{
    background: url("") no-repeat;
    background-size: cover;
    background-color: rgba(0,0,0,0.3);

}
.mui-popup-input input{
    box-sizing: border-box!important;
    -webkit-box-sizing: border-box!important;
}

/*覆盖原来的时间控制条样式start*/
.vcp-controls-panel.hide,.vcp-controls-panel.show{
    display: block!important;
    animation:unset!important;
    animation-fill-mode: none!important;
    -webkit-animation:unset!important;
}
.vcp-timeline{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 10px 0 60px;
    top: 0!important;
    left: 0!important;
}


.vcp-playtoggle{
    background-image: url(/index/img/icon-play.png)!important;
    background-position: center center;
}
.vcp-playing .vcp-playtoggle{
    background-image: url(/index/img/icon-pause.png)!important;
    background-position: center center;
}


.vcp-slider .vcp-slider-track{
    background-color: #28d2b5!important;
}
.vcp-slider .vcp-slider-thumb{
    background-color: #28d2b5!important;

}
.vcp-fullscreen-toggle{
    display: none;
}
.vcp-panel-bg{
    background: none!important;
}
.vcp-timeline:hover .vcp-slider{
    height: 2px!important;
    margin-top: 8px!important;
}
.vcp-timeline:hover .vcp-slider-thumb{
    width: 10px!important;
    height: 10px!important;
    margin-left: -5px!important;
    top: -4px!important;
}
.vcp-playtoggle:focus, .vcp-playtoggle:hover{
    background-color: rgba(0,0,0,0)!important;
}
.vcp-timelabel{
    line-height: 3.5em!important;
}
.vcp-timelabel, .vcp-volume{
    letter-spacing: 0;
}
/*覆盖原来的时间控制条样式end*/
.vcp-controls-panel{
    bottom: 20px!important;
}


























